<template>
	<view class="tabs">
		<view class="card box-c animated fadeIn" hover-class="tada">
			<view class="order-info">
				退款订单
			</view>
		  	<view class="head1" @tap="getclassDetail">
		  		<text>{{orderListInfo.shopName}}</text>
		  		<icon style="margin-left:15rpx ; font-size: 20rpx;color: #999999;" class="iconfont iconqianjin"></icon>
		  	</view>
		  	<view class="box">
		  		<view class="">
		  			<image class="image1" style="height: 130rpx;border-radius: 10rpx;" :src="orderListInfo.classImage" />
		  		</view>
		  		<view class="list-1">
		  			<view class="">{{orderListInfo.className}}</view>
		  			<view class="">
		  				<image class="image2" src="../../static/images/lesson/teacher@2x.png" mode=""></image>
		  				<text class="namet">{{orderListInfo.teacherName}}老师</text>
						<text class="price">{{orderListInfo.classPrice}}</text>
		  			</view>
		  		</view>
		  	</view>
		</view>	
		<view class="bg-1 mt-2">
			<view class="box d-jc-sb d-ai-c">
				<view class="box title d-ai-c">
					<text>
						申请类型
					</text>
					<picker class="ml--1" @change="bindPickerChange2" :value="index2" :range="array2">
						<view class="uni-input">{{array2[index2]}}</view>
					</picker>
				</view>
				<view class="box d-jc-c">
					<text class="iconfont iconqianjin">
					</text>
				</view>
			</view>
			<view class="line"></view>
			<view class="box d-jc-sb d-ai-c">
				<view class="box title d-ai-c d-ac-sa">
					<text>
						申请原因
					</text>
					<picker class="ml--1" @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>
		
				<view class="box d-jc-c">
					<text class="iconfont iconqianjin">
					</text>
				</view>
			</view>
			<view class="line"></view>
			<view class="box-c">
				<view class="box title">
					<text>
						退款说明
					</text>
				</view>
				<view class="box">
					<textarea v-model="refound.refundRemark" class="textarea m-1" placeholder="请填写补充说明，有利于您的退款售后哦~" auto-height />
		
				</view>
			</view>
		</view>
		<view class="lastcard  animated fadeIn" hover-class="tada">
			<view class="" @tap="apply">
				确认申请
			</view>
		</view>
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				orderListInfo:'',
				array: ['我不想要了', '买错了/已经重复下单'],
				array2: ['仅退款(无需退换货)'],
				index: 0,
				index2: 0,
				refound: {
					orderNumber: '',
					refundRemark:'',
					refundType:'',
					refundCause:'',
					
				
				},
			}
		},
		methods:{
			apply(){
				uni.showModal({
				    title: '提示',
				    content: '确定申请退款吗？',
				    success:(res) =>{
				        if (res.confirm) {
				            if(this.refound.refundRemark===''){
				            	uni.showToast({
				            	    title: '请填写退款说明',
				            	    duration: 2000,
				            		icon:'none'
				            	});
				            }else{
				            	this.refound.orderNumber = this.orderListInfo.ordersNumber
				            	this.refound.refundType = this.index + 1
				            	this.refound.refundCause = this.index2 + 1
				            	console.log(this.refound)
				            	this.$api.ClassOrActivityRefund(this.refound).then((res) => {
				            		if (res.data.success) {
				            			uni.$emit("carData", 3)
				            			setTimeout(function() {
				            				uni.navigateBack({
				            					delta: 2
				            				});
				            			}, 1100);
										uni.showToast({
											title: '申请提交成功！',
											duration: 1500,
											icon: "none",
											
										});
				            		} else {
				            			uni.showToast({
				            				title: res.data.message,
				            				duration: 1000,
				            				icon: "none"
				            			});
				            		}
				            	})
				            }
				            
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			bindPickerChange2: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index2 = e.target.value
			}
		},
		onLoad(option) { 
				console.log(option.ordersNumber); 
				let _this = this
					        console.log(option.ordersNumber); 
							this.$api.getClassOrdersListInfo({
								ordersNumber:option.ordersNumber
							}).then((res) => {
							   	if (res.data.code == 200) {
							   		// console.log(res.data.dataMap)
							   		_this.orderListInfo = res.data.dataMap
									
							   		
					        }
				    })
				}
				
				
		    }
</script>

<style lang="less" scoped>
	.price{
		margin-left: 187rpx;
	}
	.namet{
		margin-left: 7rpx;
	}
	.image2{
		width: 24rpx;
		height:22rpx
	}
	.tabs {
		height: 100%;
		flex: 1;
		flex-direction: column;
		background-color: #F8F8F8;
	}
	.iconqianjin {
		font-size: 24rpx;
	}
	
	.title {
		text:first-child {
			width: 140rpx;
			color: #666666;
			font-size: 28rpx;
		}
	
		text:nth-child(2) {
			width: 300rpx;
			color: #333333;
			font-size: 30rpx;
		}
	}
	.line {
		width: 650rpx;
		height: 3rpx;
		background-color: #EEEEEE;
		margin: 10rpx auto;
	}
	.bg-1 {
		padding: 20rpx;
		width: 670rpx;
		height: 430rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 12rpx;
		margin: 0 auto;
	
		.textarea {
			width: 600rpx;
			background-color: #F8F8F8;
			min-height: 110rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			padding: 25rpx 20rpx;
		}
	
		.icon-quan {
			font-size: 30rpx;
		}
	
		.title1 {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
		}
	uni-page-body {
		height: 100%;
		position: relative;
		background-color: #f8f8f8;
	}
		.content {
			.text-line {
				text {
					text-decoration: line-through
				}
			}
	
			.icon-dui {
				color: #FF5551 !important;
			}
	
			.number {
				color: #666666;
				font-size: 30rpx;
				width: 100rpx;
				text-align: end;
				margin-top: 55rpx;
			}
	
			image {
				width: 128rpx;
				height: 128rpx;
				border-radius: 10rpx;
			}
	
			view:nth-child(1) {
				text {
					font-size: 42rpx;
					color: #CCCCCC;
				}
	
			}
		}
	
		.iconqianjin {
			font-size: 24rpx;
		}
	
		.title {
			text:first-child {
				width: 140rpx;
				color: #666666;
				font-size: 28rpx;
			}
	
			text:nth-child(2) {
				width: 300rpx;
				color: #333333;
				font-size: 30rpx;
			}
		}
	}
	.tabs {
		flex: 1;
		flex-direction: column;
		background-color: #F8F8F8;
		overflow: hidden;
	}
	.informion>text:nth-child(2){
		position: absolute;
		right: 10rpx;
	}
	.informion{
		height: 100rpx;
		width: 639rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid #EEEEEE;
		color: #666666;
		font-size: 30rpx;
		position: relative;
		
	}
	.order-infoTo{
		margin: 0 auto;
		width: 640rpx;
		/* height: 400rpx; */
	}
	.order-info{
		height: 70rpx;
		color: #333333;
		font-size: 30rpx;
		font-weight: bold;
		line-height: 70rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.list-1 {
		padding: 0 0 0 20rpx;
	}
	
	.list-1 view:nth-child(1) {
		font-weight: 600;
		margin-top: -7rpx;
	}
	
	.list-1 view:nth-child(2) {
		font-size: 24rpx;
		margin-top: 50rpx;
		color: #9e9e9e;
	}
	.head1{
		font-size: 30rpx;
		color:#666666;
		height: 70rpx;
		line-height: 70rpx;
		position: relative;
		margin-top: 5rpx;
	}
	uni-page-body {
		height: 100%;
		position: relative;
		background-color: #f8f8f8;
	}
	.img{
		width: 100rpx;
		height: 106rpx;
		margin-top: 50rpx;
	}
	
	.image1{
		width: 180rpx;
		height: 130rpx;
	}
	.font{
		color: #FF5551;
		font-size: 30rpx;
	}
	.card1 {
		display: flex;
		width: 650rpx;
		height: 460rpx;
		margin: 10rpx auto;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		margin-bottom: 30rpx;
	}
	.card {
		display: flex;
		width: 650rpx;
		height: 300rpx;
		margin: 30rpx auto;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 10rpx 30rpx;
		margin-bottom: 30rpx;
	}
	.lastcard {
		display: flex;
		height: 120rpx;
		width: 100%;
		position: absolute;
		bottom: 50rpx;
	}
	.lastcard>view{
		margin-top: 20rpx;
		line-height: 88rpx;
		height: 88rpx;
		width: 600rpx;
		border-radius: 40rpx;
		border: 2rpx solid #FF5551;
		background-color: #FF5551;
		color: #ffffff;
		font-size: 30rpx;
		text-align: center;
		margin: auto;
	}
</style>

